import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";
import "./index.less";

gsap.registerPlugin(DrawSVGPlugin);

const svgVariants = [
	`<svg width="310" height="40" viewBox="0 0 310 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.0039 33.582C32.2307 33.7406 47.4552 33.7271 62.676 33.7113C67.3044 33.7064 96.546 33.9549 104.728 32.9769C113.615 31.9146 104.516 29.2022 102.022 28.1821C89.9573 23.2459 77.3751 19.9248 65.0451 15.9546C57.8987 13.6536 37.2813 9.3934 44.2314 7.00157C50.9667 4.68363 64.2873 6.71856 70.4249 6.86582C105.866 7.71618 141.306 8.48751 176.75 9.49827C217.874 10.671 258.906 11.9547 300 15.3886" stroke="currentColor" stroke-width="30" stroke-linecap="round"></path></svg>`,
	`<svg width="310" height="40" viewBox="0 0 310 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.99805 20.9998C65.6267 17.4649 126.268 13.845 187.208 12.8887C226.483 12.2723 265.751 13.2796 304.998 13.9998" stroke="currentColor" stroke-width="30" stroke-linecap="round"/></svg>`,
	`<svg width="310" height="40" viewBox="0 0 310 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 29.8857C52.3147 26.9322 99.4329 21.6611 146.503 17.1765C151.753 16.6763 157.115 15.9505 162.415 15.6551C163.28 15.6069 165.074 15.4123 164.383 16.4275C161.704 20.3627 157.134 23.7551 153.95 27.4983C153.209 28.3702 148.194 33.4751 150.669 34.6605C153.638 36.0819 163.621 32.6063 165.039 32.2029C178.55 28.3608 191.49 23.5968 204.869 19.5404C231.903 11.3436 259.347 5.83254 288.793 5.12258C294.094 4.99476 299.722 4.82265 305 5.45025" stroke="currentColor" stroke-width="30" stroke-linecap="round"/></svg>`
];

const TextDraw: React.FC<{ label: string }> = ({ label }) => {
	const boxRef = useRef<HTMLDivElement>(null);

	useEffect(() => {
		const box = boxRef.current;
		if (!box) return;

		let enterTween: gsap.core.Tween | null = null;
		let leaveTween: gsap.core.Tween | null = null;
		let index = Math.floor(Math.random() * svgVariants.length);

		const handleEnter = () => {
			if (enterTween && enterTween.isActive()) return;
			if (leaveTween && leaveTween.isActive()) leaveTween.kill();

			box.innerHTML = svgVariants[index];
			const svg = box.querySelector("svg");
			const path = svg?.querySelector("path");
			if (path) {
				gsap.set(path, { drawSVG: "0%", strokeWidth: 50 });
				enterTween = gsap.to(path, {
					duration: 0.5,
					drawSVG: "100%",
					ease: "power2.inOut"
				});
			}
			index = (index + 1) % svgVariants.length;
		};

		const handleLeave = () => {
			const path = box.querySelector("path");
			if (!path) return;
			leaveTween = gsap.to(path, {
				duration: 0.5,
				drawSVG: "100% 100%",
				ease: "power2.inOut",
				onComplete: () => (box.innerHTML = "")
			});
		};

		box.parentElement?.addEventListener("mouseenter", handleEnter);
		box.parentElement?.addEventListener("mouseleave", handleLeave);

		return () => {
			box.parentElement?.removeEventListener("mouseenter", handleEnter);
			box.parentElement?.removeEventListener("mouseleave", handleLeave);
		};
	}, []);

	return (
		<span className="text-draw">
			<span className="text-draw__p">{label}</span>
			<div className="text-draw__box" ref={boxRef}></div>
		</span>
	);
};

export default TextDraw;
